<template>
  <div class="app-container">
    <Find :OriginalFilter="{ static: true }" :formList="formList" @Launchform="Launchform" @findClicked="findClicked" />
    <div class="container mt24">
      <el-card shadow="never" :body-style="{ padding: '12px 20px 12px' }" style="margin-right: 20px">
        <div slot="header" class="mb9 f16">
          <span style="font-weight: 600">用量明细资料</span>
        </div>
        <Table
          :tableData="DosageDetail.list"
          :tableHeader="tableHeader"
          :TableHeight="50"
          :outTableHeight="220"
          @currentRow="clicktogetdata"
          :isLoading="isLoading"
        />

        <div class="mt15 f12 mb36">
          <span class="mr10">材料名称</span
          ><el-input class="mr55" v-model="materialNameVal" placeholder="" size="default" clearable @change="" style="width: 331px"></el-input>
          <span class="mr10">备注</span
          ><el-input v-model="remarkVal" placeholder="" size="default" clearable @change="" style="width: 331px"></el-input>
        </div>

        <el-card shadow="never" :body-style="{ padding: '0px' }">
          <div slot="header" class="mb9 f16">
            <span style="font-weight: 600">贴合子材料明细</span>
          </div>
          <Table :isLoading="isLoading1" :tableData="TableLaminating.list" :tableHeader="tableHeader2" :TableHeight="50" :outTableHeight="220" />

          <!-- 分页器 -->
        </el-card>
        <PageModule :PageData="{ total }" @pageChange="handleSizeChange" @pageSizeChange="handleCurrentChange" />
      </el-card>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import fileRequest from '@/utils/fileRequest'
import JMessage from '@/utils/JMessage'
export default defineComponent({
  name: 'MoldingBOM'
})
</script>
<script lang="ts" setup>
import { i18n, Jzhcn } from '@/i18n'
import { ref, onMounted } from 'vue'
import { UsageDetailsData, laminatingMaterial } from '@/api/GeneralManager/Factoryinquiry/MoldingBOM'
import type { DosageDetailsParameters, UsageDetailsDataInterface, DateList } from '@/api/GeneralManager/Factoryinquiry/MoldingBOM'
const formList = ref([
  {
    type: 'input',
    inputPlaceholder: '请输入型体',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入颜色',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入部位',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入物料编码',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入业务物料编码',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入材料名称',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入规格',
    inputValue: ''
  },
  {
    type: 'button',
    checkboxLabel: '置空',
    bgColor: '#1890FF'
  },
  {
    type: 'button',
    checkboxLabel: '导出'
  }
])

const isLoading = ref(true)
const isLoading1 = ref(true)

// 用量明细资料
const DosageDetail = ref<UsageDetailsDataInterface>({
  list: []
})

const laminating = ref<string>('')

const TableLaminating = ref<DateList>({
  list: []
})

const FitMaterialData = async () => {
  isLoading1.value = true
  const result = await laminatingMaterial(laminating.value)
  TableLaminating.value.list = result.list
  result.list.map((item) => {
    if (item.purFlag === 'Y') {
      item.purFlag = true
    }
  })
  isLoading1.value = false
}

const clicktogetdata = (row: any) => {
  const { mtlNo2, mtlName, remark } = row || {}
  laminating.value = mtlNo2
  materialNameVal.value = mtlName
  remarkVal.value = remark
  if (laminating.value !== undefined) {
    FitMaterialData()
  }
}

const DosageDetailsParametersKlt = ref<DosageDetailsParameters>({
  mtlName: '',
  mtlNo2: '',
  mtlSpec: '',
  mtlTypeNo: '',
  pageNum: 1,
  pageSize: 40,
  partName: '',
  styleColor: '',
  styleNo: ''
})

const ObtainTheDetailsOfUsage = async () => {
  isLoading.value = true
  const result = await UsageDetailsData(DosageDetailsParametersKlt.value)
  total.value = result.total!
  DosageDetail.value.list = result.list
  const { mtlNo2, mtlName, remark } = result.list[0] || {}
  laminating.value = mtlNo2
  remarkVal.value = remark
  materialNameVal.value = mtlName
  isLoading.value = false
  isLoading1.value = false
  if (laminating.value !== undefined) {
    FitMaterialData()
  }
}

const tableHeader = ref([
  {
    label: '型体',
    prop: 'styleNo'
  },
  {
    label: '颜色',
    prop: 'styleColor'
  },
  {
    label: '序号',
    prop: 'seqNo'
  },
  {
    label: '部位',
    prop: 'partName'
  },
  {
    label: '分段',
    prop: 'segment'
  },
  {
    label: '分类名称',
    prop: 'typeName'
  },
  {
    label: '物料编码',
    prop: 'mtlNo2'
  },
  {
    label: '材料颜色',
    prop: 'mtlColor'
  },
  {
    label: '材料名称',
    prop: 'mtlName'
  },
  {
    label: '规格',
    prop: 'mtlSpec'
  },
  {
    label: '单位',
    prop: 'mtlUnit'
  },
  {
    label: '尺码起',
    prop: 'size1'
  },
  {
    label: '尺码止',
    prop: 'size2'
  },
  {
    label: '厂商',
    prop: 'vendor'
  },
  {
    label: '用量',
    prop: 'usage'
  },
  {
    label: '计算方式',
    prop: 'usageType'
  }
])

const materialNameVal = ref('')

const remarkVal = ref('')

const tableHeader2 = ref([
  {
    label: '物料编码',
    prop: 'subMtlNo',
    width: '214'
  },
  {
    label: '材料颜色',
    prop: 'subMtlColor',
    width: '222'
  },
  {
    label: '材料名称',
    prop: 'subMtlName',
    width: '370'
  },
  {
    label: '规格',
    prop: 'subMtlSpec'
  },
  {
    label: '单位',
    prop: 'subMtlUnit'
  },
  {
    label: '加工方式',
    prop: 'prdType'
  },
  {
    label: '比例',
    prop: 'percent'
  },
  {
    type: 'checkbox',
    label: '是否请购',
    prop: 'purFlag'
  }
])

// 分页器
const total = ref()
const handleSizeChange = (val: number) => {
  DosageDetailsParametersKlt.value.pageNum = val
  ObtainTheDetailsOfUsage()
}
const handleCurrentChange = (val: number) => {
  DosageDetailsParametersKlt.value.pageSize = val
  ObtainTheDetailsOfUsage()
}

// 统一调用接口
const interAceFunct = () => {
  // 用量明细资料数据
  ObtainTheDetailsOfUsage()
}

onMounted(() => {
  interAceFunct()
})

const Launchform = (row: any) => {
  DosageDetailsParametersKlt.value.styleNo = row[0].inputValue
  DosageDetailsParametersKlt.value.styleColor = row[1].inputValue
  DosageDetailsParametersKlt.value.partName = row[2].inputValue
  DosageDetailsParametersKlt.value.mtlTypeNo = row[3].inputValue
  DosageDetailsParametersKlt.value.mtlNo2 = row[4].inputValue
  DosageDetailsParametersKlt.value.mtlName = row[5].inputValue
  DosageDetailsParametersKlt.value.mtlSpec = row[6].inputValue
  ObtainTheDetailsOfUsage()
}

const findClicked = async (find: any) => {
  if (find === '置空') {
    clearFormList1()
  }
  if (find === '导出') {
    const res = (await fileRequest.post(`/quotation/bomColor/downloadPcBom`, DosageDetailsParametersKlt.value)) as any
    const link = document.createElement('a') // 利用a标签自定义下载文件名
    let blob = new Blob([res.data]) // 创建Blob对象，设置文件类型
    link.style.display = 'none'
    //设置连接
    link.href = window.URL.createObjectURL(blob)
    link.download = `型体BOM查询导出${Date.now()}.xls` //自定义文件名字
    document.body.appendChild(link)
    //模拟点击事件
    link.click()
    document.body.removeChild(link)
  }
}

const clearFormList1 = () => {
  formList.value.forEach((item) => {
    if (item.type === 'input') {
      item.inputValue = ''
    }
    // Add other conditions for different form item types
  })
}
</script>

<style lang="less" scoped></style>
